<template>
  <div class="prizeContent">
    <div class="content" v-for="(item,index) in form" :key="index">
      <div class="line"></div>
      <div class="tip"><span>兑换ID:{{item.userTask.exchange_no}}</span></div>
      <div class="img">
        <img :src="item.userTaskDetail.prizes_img_url" alt="">
      </div>
      <div style="width: 100%;height: 1px;padding-left: 0.37rem;box-sizing: border-box">
        <div style="width: 100%;height: 100%;background: #F6F6F6"></div>
      </div>
      <div class="address">
        <div class="div1">
          <img class="icAddress" src="@/assets/images/ic_address.png" alt="">
          <div class="div1_1">
            <div class="top">
              <div class="userName">{{item.userAddress.name}}</div>
              <div class="phone">{{item.userAddress.mobile}}</div>
            </div>
            <div class="userAddress">{{item.userAddress.region_name}} {{item.userAddress.address_detail}}</div>
          </div>
        </div>
        <img class="icRight" src="@/assets/images/ic_right.png" alt="">
      </div>
      <div class="time">兑换时间：{{item.create_time}}</div>
      <div style="width: 100%;height: 1px;padding-left: 0.37rem;box-sizing: border-box" v-if="(status+1) === 2">
        <div style="width: 100%;height: 100%;background: #F6F6F6"></div>
      </div>
      <div class="time" v-if="(status+1) === 2">发货时间：{{item.deliver_time}}</div>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/6/18 13:58.
   */

  export default {
    mounted() {

    },
    components: {},
    props: {
      form: {
        type: Array,
        default() {
          return [];
        }
      },
      status: {
        default: Number
      }
    },
    data() {
      return {}
    },
    computed: {},
    methods: {},
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .prizeContent {
    width: 100%;
  }

  .content {
    box-sizing: border-box;

    .tip {
      font-size: 0.24rem;
      color: #999999;
      padding-left: 0.42rem;
      height: 0.56rem;
      line-height: 0.56rem;

      span {
        width: 100%;
        height: 100%;
        display: block;
        border-bottom: 1px solid #F6F6F6;

      }
    }

    .img {
      width: 6.8rem;
      height: 4rem;
      margin: 0.15rem 0.37rem 0.3rem 0.33rem;
      box-sizing: border-box;
      background: #F2F1F0;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 4.23rem;
        height: 3.09rem;
      }
    }

    .address {
      margin-top: 0.26rem;
      width: 6.9rem;
      /*height: 1.78rem;*/
      background: #F8F8F8;
      margin-left: 0.27rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: 0.38rem;

      .icAddress {
        width: 0.65rem;
        height: 0.64rem;
        margin-top: 0.57rem;
        margin-left: 0.2rem;
        margin-right: 0.2rem;
      }

      .div1_1 {
        margin-top: 0.38rem;
      }

      .icRight {
        margin-top: 0.8rem;
        margin-right: 0.18rem;
        width: 0.1rem;
        height: 0.2rem;
      }

      .div1 {
        width: 6rem;
        top: 0.38rem;
        display: flex;
        flex-direction: row;

        .top {
          display: flex;
          flex-direction: row;
          align-items: center;
        }

        .userName {
          margin-right: 0.2rem;
          color: #333333;
          font-size: 0.3rem;
        }

        .phone {
          color: #ACACAC;
          font-size: 0.26rem;
        }
      }

      .userAddress {
        width: 4.8rem;
        color: #333333;
        font-size: 0.24rem;
        margin-top: 0.06rem;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;
      }
    }

    .time {
      width: 100%;
      height: 0.76rem;
      line-height: 0.76rem;
      text-align: right;
      padding-right: 0.43rem;
      box-sizing: border-box;
      color: #999999;
      font-size: 0.24rem;
    }
  }
</style>
